<!--
文件名称: chart.html
完整存储路径: frontend/templates/chart.html
功能说明:
    图表展示页面用于以图表形式展示统计数据，与统计报表页面共享查询条件区域。
    支持：
      - 查询条件折叠/展开
      - 图表渲染（柱状、折线、多环饼图）
      - Tooltip & 自定义图例
      - 导出图表 & 查看报表
    页面布局：
      - 查询区域：固定高度，支持折叠/展开
      - 图表展示区：弹性填充剩余空间
      - 操作按钮：固定在底部
修改记录:
    2025-04-27 ★ 修正 Flex 布局冲突：明确父容器基准高度，使用 Flex gap 代替 margin，移除 h-100。
    2025-01-27 ★ 添加详细注释说明，优化代码可读性
-->
{% extends "layouts/base.html" %} 
{% block title %}图表展示 - 近视预防干预系统{% endblock %} 

{% block styles %}
<!-- 组合查询样式 -->
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/comboQuery.css') }}"
/>
<!-- 报表样式 -->
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/report.css') }}"
/>
<!-- 图表专用样式 -->
<link
  rel="stylesheet"
  href="{{ url_for('static', filename='css/chart.css') }}"
/>
{% endblock %} 

{% block content %}
<!-- 主容器：使用Flex布局，确保图表区域能够正确填充剩余空间 -->
<div id="reportWrapper" class="container">
  
  <!-- ========== 查询区域（固定高度） ========== -->
  <div id="queryPanel">
    <div id="queryCollapse" class="collapse show">
      <div class="report-query-row">
        <div class="card report-combo-query-card">
          <!-- 查询控件头部 -->
          <div class="card-header">
            <!-- 模板选择：预设查询模板 -->
            <select
              id="templateSelect"
              class="form-select form-select-sm auto-width d-inline-block"
            >
              <option value="">请选择模板</option>
              <option value="template1">按年龄段</option>
              <option value="template2">按性别</option>
            </select>
            
            <!-- 统计时间选择：年份选择器 -->
            <select
              id="statTime"
              class="form-select form-select-sm auto-width d-inline-block ml-10"
            >
              <option value="">请选择统计时间</option>
              {% for year in range(2023, 2031) %}
              <option value="{{ year }}">{{ year }}</option>
              {% endfor %}
            </select>
            
            <!-- 报表名称输入：用于保存模板 -->
            <input
              id="reportNameInput"
              type="text"
              class="form-control form-control-sm auto-width d-inline-block ml-10"
              placeholder="请输入报表名称"
            />
            
            <!-- 查询模式选择：预设模板 vs 自定义查询 -->
            <select
              id="queryMode"
              class="form-select form-select-sm auto-width d-inline-block ml-10"
            >
              <option value="template" selected>预设模板查询</option>
              <option value="custom">自定义查询</option>
            </select>
            
            <!-- 操作按钮组 -->
            <button id="saveTemplateBtn" class="btn btn-sm btn-secondary">
              保存模板
            </button>
            <button id="addConditionBtn" class="btn btn-sm btn-primary">
              添加条件
            </button>
            <button id="clearBtn" class="btn btn-sm btn-warning">取消</button>
            <button id="reportSearchBtn" class="btn btn-sm btn-success">
              查询
            </button>
            
            <!-- 图表类型选择：柱状图、饼图、折线图 -->
            <select
              id="chartType"
              class="form-select form-select-sm auto-width d-inline-block ml-10"
            >
              <option value="bar">柱状图</option>
              <option value="pie">饼图</option>
              <option value="line">折线图</option>
            </select>
          </div>
          
          <!-- 查询条件容器：动态添加高级查询条件 -->
          <div class="card-body condition-container">
            <div id="advancedQueryContainer"></div>
            <input type="hidden" id="comboConditions" value="" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== 图表展示区域（弹性填充剩余空间） ========== -->
  <div id="chartDisplayArea" class="d-flex flex-column flex-grow-1">
    <div class="card d-flex flex-column m-0">
      
      <!-- 图表标题区域 + 加载状态（固定高度） -->
      <div id="chartHeader" class="p-2 flex-shrink-0">
        <!-- 加载提示：显示数据获取进度 -->
        <div id="loading" class="text-center w-100 d-none">
          <div class="spinner-border text-primary" role="status"></div>
          <p class="mb-0">正在生成图表，请稍候...</p>
        </div>
        
        <!-- 图表标题和自定义图例容器 -->
        <div
          id="chartTitleContainer"
          class="d-flex justify-content-between align-items-center"
        >
          <h5 id="chartTitle" class="mb-0"></h5>
          <span id="chartTimeAnnotation" class="mb-0"></span>
        </div>
      </div>
      
      <!-- 图表画布区域（弹性填充，主要显示区域） -->
      <div id="chartContent" class="position-relative flex-grow-1 p-0">
        <!-- Chart.js画布：用于渲染图表 -->
        <canvas id="analysisChart"></canvas>
      </div>
      
      <!-- 汇总信息显示（固定高度） -->
      <div
        id="aggregateInfo"
        class="text-center fw-bold py-2 flex-shrink-0"
      ></div>
      
      <!-- 操作按钮行（固定在底部） -->
      <div
        class="card-footer d-flex justify-content-end align-items-center gap-2"
      >
        <!-- 显示查询条件按钮：重新展开查询区域 -->
        <button id="showQueryBtn" class="btn btn-secondary btn-sm">
          <i class="bi bi-funnel"></i> 显示查询条件
        </button>
        
        <!-- 导出图表按钮：将图表保存为PNG图片 -->
        <button id="exportChartBtn" class="btn btn-info btn-sm">
          <i class="bi bi-download"></i> 导出图表
        </button>
        
        <!-- 查看统计报表按钮：跳转到报表页面 -->
        <button id="toReportBtn" class="btn btn-primary btn-sm">
          <i class="bi bi-table"></i> 查看统计报表
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<!-- 图表颜色配置：从后端传递到前端 -->
<script>
 window.CHART_COLORS = {{ config['CHART_COLORS']|tojson|safe }};
</script>
{{ super() }}

<!-- 组合查询逻辑：与报表页面共享 -->
<script src="{{ url_for('static', filename='js/comboQuery_report.js') }}"></script>

<!-- 图表渲染逻辑：核心图表功能 -->
<script src="{{ url_for('static', filename='js/chart.js') }}"></script>
{% endblock %} 

